<template>
  <div>
    <!-- 三级分类 -->
    <CategoryList @categoryInfo="categoryId" :isShowCont="isShowCont"></CategoryList>
    <!-- 数据展示部分 -->
    <el-card>
      <div v-show="flag===0">
        <el-button
          :disabled="!category3Id"
          type="primary"
          icon="el-icon-plus"
          style="margin-bottom:10px;"
          @click="addSpu"
        >添加SPU</el-button>
        <el-table :data="records" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
          <el-table-column prop="spuName" label="spu名称" width="width"></el-table-column>
          <el-table-column prop="description" label="spu描述" width="width"></el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{row}">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                title="添加spu"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部spu列表"
                @click="showSkuInfo(row)"
              ></el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗"
                style="margin-left:10px;"
                @onConfirm="deleteSpuInfo(row)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除spu"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- SpuFrom 页面 -->
      <SpuForm v-show="flag===1" @cancel="cancel" ref="spu" />
      <!-- SkuFrom 页面 -->
      <SkuForm v-show="flag===2" @cancel="cancel" ref="sku" />
    </el-card>
    <!-- 分页器 -->
    <el-pagination
      style="text-align:center;"
      :current-page="currentPage"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      :pager-count="7"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @current-change="getSpuList"
      @size-change="handleSizeChange"
      v-if="records.length"
    ></el-pagination>
    <!-- 对话框展示 table -->
    <el-dialog :title="spu.spuName" :visible.sync="dialogTableVisible" :before-close='cloneTable'>
      <el-table :data="spuList" border style="width: 100%" v-loading="loading">
        <el-table-column prop="skuName" label="名称" width="300"></el-table-column>
        <el-table-column prop="price" label="价格" width="width"></el-table-column>
        <el-table-column prop="weight" label="重量" width="width"></el-table-column>
        <el-table-column label="默认图片" width="width">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" style="width:80px;height:80px;">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from "./SpuForm/index.vue";
import SkuForm from "./SkuForm";
export default {
  name: "Spu",
  components: { SpuForm, SkuForm },
  data() {
    return {
      //
      isShowCont: true,
      // 定义三级Id
      category1Id: "",
      category2Id: "",
      category3Id: "",
      // 初始化 分页器
      currentPage: 1, // 当前页
      limit: 3, // 页面展示的数量
      total: undefined, // 数据总数量
      records: [], // 多少条记录
      // 控制显示的是哪个页面 0: 展示默认也没面， 1: spuFrom, 2: skuFrom
      flag: 0,
      // 收集数据
      tradeMakeList: [],
      spuSaleAttrList: [],
      // 控制对话框是否显示
      dialogTableVisible: false,
      // 信息还未返回展示加载中
      loading:true,
      // 存储SPU信息
      spu: "",
      // 存储spu某项全部信息
      spuList: []
    };
  },
  mounted() {
    // 测试数据
    // this.getSpuList();
  },
  methods: {
    // 获取三级分类Id
    categoryId({ categoryId, level }) {
      if (level === 1) {
        this.category1Id = categoryId;
        // 清空后面两级 Id
        this.category2Id = "";
        this.category3Id = "";
      } else if (level === 2) {
        this.category2Id = categoryId;
        // 清空三级 Id
        this.category3Id = "";
      } else {
        this.category3Id = categoryId;
        // 当三级Id有的时候 发送请求
        this.getSpuList();
      }
    },
    // 获取 Spu 数据
    // 因为 elementUi中 current-change 事件本身就有一个 参数page 所以让它默认为 1
    async getSpuList(pager = 1) {
      this.currentPage = pager;
      let { currentPage, limit, category3Id } = this;
      // 请求数据
      let result = await this.$api.spu.reqSpuList(
        currentPage,
        limit,
        category3Id
      );
      if (result.code === 200) {
        this.records = result.data.records;
        this.total = result.data.total;
      }
    },
    // 当前页面发生变化的时候
    // handleCurrentChange(currentPage){
    //   this.currentPage = currentPage
    //   this.getSpuList()
    // },
    // 页面数量变化时
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuList();
    },
    // 添加 Spu
    async addSpu() {
      this.isShowCont = !this.isShowCont;
      this.flag = 1;
      // 调用子组件方法
      this.$refs.spu.addSpuInfo(this.category3Id, this.isShowCont);
    },
    // 修改 Spu
    updateSpu(row) {
      this.isShowCont = !this.isShowCont;
      this.flag = 1;
      // 利用 ref 调用子组件方法 同时将 三级 Id 传过去
      this.$refs.spu.initSpuData(row, this.category3Id);
    },
    // 删除 Spu 信息
    async deleteSpuInfo(row) {
      // 删除接口
      let result = await this.$api.spu.reqDeleteSpu(row.id);
      if (result.code === 200) {
        this.$message({ message: "删除成功", type: "success" });
        // 成功后再次获取数据， 同时跳转到删除时的那一页
        // 判断当前页是否有数据 如果有就呆在此页面，反之跳转上一页
        this.getSpuList(
          this.records.length > 1 ? this.currentPage : this.currentPage - 1
        );
      }
    },
    // 自定义事件 点击取消 返回数据页面
    cancel({ flag, biaoshi, isShowCont }) {
      this.isShowCont = !isShowCont;
      this.flag = flag;
      // 返回自定义页面时 还得重新发送一遍数据
      if (biaoshi === "修改") {
        // 为修改则跳到修改时的页面
        this.getSpuList(this.currentPage);
      } else {
        // 添加成功后跳到第一页
        this.getSpuList();
      }
    },
    // 添加 Sku 信息
    addSku(row) {
      this.flag = 2;
      this.isShowCont = !this.isShowCont;
      let { category1Id, category2Id } = this;
      // 调用 SKU 子组件回调
      this.$refs.sku.getDataList(
        category1Id,
        category2Id,
        row,
        this.isShowCont
      );
    },
    // 查看 SKU 信息
    async showSkuInfo(row) {
      this.spu = row;
      // 控制对话框是否显示 true 显示对话框
      this.dialogTableVisible = true;
      let result = await this.$api.spu.reqGetSkuInfo(row.id);
      if (result.code === 200) {
        // 数据返回展示数据
        this.loading = false
        this.spuList = result.data;
        
      }
    },
    // 关闭 SKU 信息对话框
    cloneTable(done){
      // 清空 spu 内容
      this.spuList = []
      // 再次启用加载
      this.loading = true
      // done: 关闭对话框
      done()
    }
  }
};
</script>

<style>
</style>